<template>
  <div class="projectile-frame">
    <MaskLayer :show="showMask"></MaskLayer>
    <div class="confirm-box">
      <div class="confirm-title">换音</div>
      <div class="text-area">
        {{content}}
      </div>
      <div class="bottom-btn">
        <span class="negative-btn" v-if="negative !== undefined" @click="$emit('close')">{{negative.text}}</span>
        <span class="positive-btn" @click="$emit('confirm')">{{positive.text}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import MaskLayer from '../MaskLayer'
// import {OPEN_PROJECTILE_FRAME} from '../../store/mutation-const';
export default {
  props: {
    title: String,
    content: String,
    negative: Object,
    positive: Object
  },
  components: {MaskLayer},
  data () {
    return {
      showMask: true
    }
  }
}
</script>
<style scoped rel="stylesheet/less" lang="less">
  .projectile-frame {
    display: block;
    height: 100%;
    width: 100%;
    z-index: 999;
    .confirm-box {
      display: block;
      height: 170px;
      width: 320px;
      background-color: white;
      border-radius: 5px;
      z-index: 1000;
      position: fixed;
      top: 30%;
      left: 27px;

      .confirm-title {
        padding: 30px 0 15px;
        text-align: center;
      }

      .text-area {
        display: flex;
        padding: 10px 0 30px;
        width: 250px;
        margin: auto;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        border-radius: 5px 5px 0 0;
        color: #b7b7b7;
      }
      .bottom-btn {
        display: flex;
        height: 44px;
        border-top: 1px solid #f1f1f1;
        border-radius: 0 0 5px 5px;
        span {
          &:nth-child(2) {
            border-left: 1px solid #f1f1f1;
          }
        }
        .negative-btn {
          display: inline-block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          color: black;
          background-color: white;
        }
        .positive-btn {
          display: inline-block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          color: #7fbe68;
          background-color: white
        }
      }
    }
  }
</style>
